<template>
  <div class="container" v-loading="loading">
    <div class="content">
      <template v-if="showModule === 'all'">
        <!-- 处置信息 -->
        <div class="info">
          <!-- 状态 -->
          <el-tag size="small" class="tag">已成交</el-tag>
          <div class="item">
            <div class="label">信息标题：</div>
            <div class="value">{{ detail.title }}</div>
          </div>
          <div class="item">
            <div class="label">所属分类：</div>
            <div class="value">{{ detail.cate_name }}</div>
          </div>
          <div class="item">
            <div class="label">所属地区：</div>
            <div class="value">{{ detail.address }}</div>
          </div>
          <div class="item">
            <div class="label">估值：</div>
            <div class="value">{{ detail.guzhi }}</div>
          </div>
          <div class="item">
            <div class="label">数量：</div>
            <div class="value">{{ detail.num }}</div>
          </div>
          <div class="item">
            <div class="label">联系人：</div>
            <div class="value">{{ detail.user_name }}</div>
          </div>
          <div class="item">
            <div class="label">联系电话：</div>
            <div class="value">{{ detail.user_phone }}</div>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <div class="label">企业名称：</div>
            <div class="value">{{ detail.company }}</div>
            <el-tag size="small" style="margin-left: 10px">{{ detail.vip_level_show }}</el-tag>
          </div>
          <div class="item">
            <div class="label">联系人：</div>
            <div class="value">{{ detail.com_user_name }}</div>
          </div>
          <div class="item">
            <div class="label">联系电话：</div>
            <div class="value">{{ detail.com_user_phone }}</div>
          </div>
          <div class="item">
            <div class="label">是否已加微信：</div>
            <div class="value">{{ detail.is_add_wx === 1 ? '是' : '否' }}</div>
          </div>
          <div class="item">
            <div class="label">跟进人：</div>
            <div class="value">{{ detail.follow_name }}</div>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <div class="label">成交金额：</div>
            <div class="value">{{ detail.deal_money }}</div>
          </div>
          <div class="item">
            <div class="label">成交时间：</div>
            <div class="value">{{ detail.order_time }}</div>
          </div>
        </div>
        <div class="info">
          <div class="item">
            <div class="label">订单编号：</div>
            <div class="value">{{ detail.order_code }}</div>
          </div>
          <div class="item">
            <div class="label">订单金额：</div>
            <div class="value">{{ detail.deal_money }}</div>
          </div>
          <div class="item">
            <div class="label">支付状态：</div>
            <div class="value">{{ detail.pay_sts_show }}</div>
          </div>
          <div class="item">
            <div class="label">支付时间：</div>
            <div class="value">{{ detail.deal_time }}</div>
          </div>
        </div>
      </template>
      <!-- 处置信息 -->
      <div class="info" v-else>
        <!-- 状态 -->
        <el-tag size="small" class="tag">已成交</el-tag>
        <div class="item">
          <div class="label">信息标题：</div>
          <div class="value">{{ detail.title }}</div>
        </div>
        <div class="item">
          <div class="label">所属分类：</div>
          <div class="value">{{ detail.cate_name }}</div>
        </div>
        <div class="item">
          <div class="label">所属地区：</div>
          <div class="value">{{ detail.address }}</div>
        </div>
        <div class="item">
          <div class="label">成交金额：</div>
          <div class="value">{{ detail.deal_money }}</div>
        </div>
        <div class="item">
          <div class="label">成交时间：</div>
          <div class="value">{{ detail.deal_time }}</div>
        </div>
        <div class="item">
          <div class="label">成交客户：</div>
          <div class="value">{{ detail.deal_name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { apiOrderDetail } from '@/api/assetsDisposal'
import { VIP_LEVEL } from '@/constant'

export default {
  props: {
    id: String,
    payStsList: Array,
    showModule: {
      type: String,
      default: 'all',
    },
  },
  components: {},
  data() {
    return {
      loading: false,
      detail: {},
      contactRecord: [],
      showContactRecord: false,
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      const info = {
        id: this.id,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiOrderDetail(formData).then((res) => {
        if (res.code !== 200) {
          return
        }
        let item = this.payStsList.find((sts) => sts.id === parseInt(res.data.pay_sts))
        if (item) {
          res.data.pay_sts_show = item.text
        } else {
          res.data.pay_sts_show = ''
        }
        let item1 = VIP_LEVEL.find((sts) => sts.id === parseInt(res.data.vip_level))
        if (item1) {
          res.data.vip_level_show = item1.name
        } else {
          res.data.vip_level_show = ''
        }

        this.detail = res.data
        if (this.showModule === 'info') {
          this.$emit('getdetail', this.detail)
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  .content {
    width: 100%;
    padding: 0 16px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
}
.info {
  background: #efefef;
  padding: 12px 16px;
  font-size: 12px;
  color: #333333;
  margin-bottom: 16px;
  position: relative;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 2;
    .label {
      width: 100px;
      flex-shrink: 0;
    }
  }
  .tag {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

.contact-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .list {
    font-size: 12px;
    width: 100%;
    .item {
      width: 100%;
      background: #efefef;
      padding: 10px 20px;
      .line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        p {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
